<!DOCTYPE html>
<html lang="cn">
<head>
    <title>{$data.title}</title>
    <meta name="description" content="{$data.share_introduction}">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <script src="{$data.ossHost}/static/active_fortune_year_new/js/adaptation.js?v=1"></script>
    <script src="{$data.ossHost}/static/active_fortune_year_new/js/resLoader.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <link rel="stylesheet" href="{$data.ossHost}/static/active_fortune_year_new/css/animate.min.css">
    <link rel="stylesheet" href="/static/active_fortune_year_new/css/style.css?v=10">
    <style type="text/css">
        /*下滑gif*/
        .next-s {
            background: url("{$data.ossHost}/static/active_fortune_year_new/img/next.png") no-repeat center center;
            background-size: 100%;
            width: 1.24rem;
            height: 1.15rem;
            position: absolute;
            bottom: 0.22rem;
            left: calc(50% - 0.62rem);
            z-index: 120;
        }
    </style>
</head>
<body>
<div class="music-box">
    <img class="music-logo" src="{$data.ossHost}/static/active_fortune_year_new/img/music.png" alt="">
    <audio id="bg-music" src="{$data.ossHost}/static/active_fortune_year_new/music/background1.mp3" loop="loop"></audio>
</div>
<div class="load-background">
    <div class="load-box">
        <img src="{$data.ossHost}/static/active_fortune_year_new/img/loading.gif" class="load-img" alt="">
        <div class="progress-box">
        </div>
    </div>
</div>
<div class="content-box">
    <div class="con-background p1">
        <div class="cloud" style="display: none"></div>
        <div class="txt" style="display: none"></div>
        <div class="person" style="display: none"></div>
        <a href="javascript:;" class="next un next-s" style="display: none"></a>
    </div>
    <div class="con-background p2">
        <div class="cloud" style="display: none"></div>
        <div class="left_stars"></div>
        <div class="right_star"></div>
        <div class="right_stars"></div>
        <div class="txt" style="display: none"></div>
        <div class="btn" style="display: none"></div>
    </div>
    <div class="con-background p3">
        <div class="dot"></div>
        <div class="person" style="display: none"></div>
        <div class="star"></div>
        <div class="txt_con">
            <div class="txt1"></div>
            <div class="txt2">
                <div class="item item_sun">
                    <div class="planet"></div>
                    <div class="sign"></div>
                </div>
                <div class="sep"></div>
                <div class="item item_moon">
                    <div class="planet"></div>
                    <div class="sign"></div>
                </div>
                <div class="sep"></div>
                <div class="item item_asc">
                    <div class="planet"></div>
                    <div class="sign"></div>
                </div>
            </div>
            <div class="txt3"></div>
        </div>
    </div>
    <div class="con-background p4">
        <div class="txt_con" style="display: none">
            <div class="txt_top"></div>
            <div class="txt_center_con">
                <div class="txt_three"></div>
                <div class="txt_center_last"></div>
            </div>
            <div class="txt_bottom"></div>
        </div>
        <div class="right_dot"></div>
        <div class="person"></div>
        <a href="javascript:;" class="next un next-s" style="display: none"></a>
    </div>
    <div class="con-background p5">
        <div class="person"></div>
        <div class="txt_con" style="display: none">
            <div class="txt_top"></div>
            <div class="txt_center_con">
                <!--                <div class="txt_center_left"></div>-->
                <div class="txt_center"></div>
                <div class="txt_center_right"></div>
            </div>
            <div class="txt_bottom"></div>
        </div>
        <div class="dot"></div>
        <a href="javascript:;" class="next un next-s" style="display: none"></a>
    </div>
    <div class="con-background p6">
        <div class="txt_con" style="display: none">
            <div class="txt_top"></div>
            <div class="txt_center_con">
                <div class="txt_center_left"></div>
                <div class="txt_sign"></div>
            </div>
            <div class="txt_bottom"></div>
        </div>
        <div class="dot"></div>
        <div class="btn" id="p6_btn_play"></div>
        <div class="hint"></div>
        <div class="circle"></div>
        <div class="person"></div>
        <div class="player_shandow_con" style="display: none"></div>
        <div class="player_con" style="display: none;">
            <div class="close" id="p6_btn_player_close"></div>
            <div class="prism-player" id="player-con"></div>
        </div>
    </div>
    <div class="con-background p7">
        <div class="rect_con">
            <div class="txt"></div>
            <div class="btn" id="p7_btn"></div>
        </div>
        <div class="dot"></div>
        <div class="person"></div>
    </div>

</div>
<div class="bg-box">
    <div class="music_name">致准了星球小行星的BGM:2020欢别酒-Aussens@iter</div>
    <img id="result_img">
    <img id="save_pic_btn" alt="">
    <div class="btbox">
        <img id="bottom_bg" alt="">
        <div class="top">
            <img id="year_btn">
            <img id="share_btn" alt="">
        </div>
    </div>
    <div class="cloud_bottom"></div>
    <div class="cover-box">
        <!--分享图片-->
        <div class="msg" style="display: none" alt=""></div>
        <!--加载中-->
        <img id="loading" style="display: none" alt="">
    </div>
    <!--保存图片-->
    <div class="pop_con" style="display: none">
        <img id="save_img" alt="">
    </div>
</div>
</body>
<script src="{$data.ossHost}/static/active_fortune_year_new/js/jquery-v2.1.1.min.js"></script>
<script src="{$data.ossHost}/static/active_fortune_year_new/js/EventUtil.js"></script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?97bd25fb643e2fbf349c2c61e247fc7a";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    var localhosts = "{$data.host}";
    var osshosts = "{$data.ossHost}";
    var uid = "{$data.uid}";
    var type = "{$data.type}";
    var sign = "{$data.sign}";
    var isInApp = "{$data.isInApp}";
    var app_type = '{$data.app_type}';
    var version = '{$version}'
    var share_title = '{$data.share_title}';
    var share_introduction = '{$data.share_introduction}';
    var data_wechat = JSON.parse('{:json_encode($data)}');

    var not_in_app_login_url = '{$data.not_in_app_login_url}';
    var not_in_app_is_login = '{$data.not_in_app_is_login}';
    var not_in_app_page = '{$data.not_in_app_page}';

    var moon = "{$data.moon}";
    var asc = "{$data.asc}";

    var video_url = "{$data.video_url}";
    var video_thumb = "{$data.video_thumb}";
</script>
{if 1==$data.isInApp}
<script src="/static/vip/js/common_func.js?v=1"></script>
{/if}
<script type="text/javascript">
    wx.config({
        debug: false,
        appId: '{$data.signPackage.appId}',
        timestamp: '{$data.signPackage.timestamp}',
        nonceStr: '{$data.signPackage.nonceStr}',
        signature: '{$data.signPackage.signature}',
        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
    });
    wx.ready(function () {
        wx.onMenuShareAppMessage({
            title: share_title,
            desc: '{$data.share_introduction}',
            link: '{$data.signPackage.url}',
            imgUrl: '{$data.ossHost}/static/active_fortune_year_new/img/share.jpg',
            type: 'link',
            dataUrl: '',
            success: function () {
                console.log('成功');
                $('.cover-box').hide();
            },
            cancel: function () {
                console.log('shib');
                $('.cover-box').hide();
            }
        });
        wx.onMenuShareTimeline({
            title: share_title,
            link: '{$data.signPackage.url}',
            imgUrl: '{$data.ossHost}/static/active_fortune_year_new/img/share.jpg',
            success: function () {
                console.log('成功');
                $('.cover-box').hide();
            },
            cancel: function () {
                console.log('shib');
                $('.cover-box').hide();
            }
        });
    });
</script>
<script src="/static/active_fortune_year_new/js/js.js?v=10"></script>
<!--<script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>-->

<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css"/>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
<script language="javascript">
    var player = new Aliplayer({
            "id": "player-con",
            // "source": article_info.url,
            // "source": 'https://video.goddessxzns.com/f22e000d95444ae98c32…98d297f91-63f4dd363482d4b0d00af9533f645f17-sd.mp4',

            "source": video_url,
            "width": "100%",
            "height": "100%",
            "autoplay": false,
            "isLive": false,
            "cover": 'https://oss.goddessxzns.com' + video_thumb,
            "rePlay": true,
            "playsinline": true,
            "preload": false,
            "language": "zh-cn",
            "controlBarVisibility": "click",
            "videoWidth": "100%",
            "showBarTime": 5000,
            "useH5Prism": true,
            // "skinLayout": [
            //     {
            //         "name": "H5Loading",
            //         "align": "cc"
            //     },
            //     {
            //         "name": "errorDisplay",
            //         "align": "tlabs",
            //         "x": 0,
            //         "y": 0
            //     },
            //
            //     {
            //         "name": "tooltip",
            //         "align": "blabs",
            //         "x": 0,
            //         "y": 56
            //     },
            //     {
            //         "name": "thumbnail"
            //     },
            //     {
            //         "name": "controlBar",
            //         "align": "blabs",
            //         "x": 0,
            //         "y": 0,
            //         "children": [
            //             {
            //                 "name": "progress",
            //                 "align": "blabs",
            //                 "x": 0,
            //                 "y": 44
            //             },
            //             {
            //                 "name": "playButton",
            //                 "align": "tl",
            //                 "x": 15,
            //                 "y": 12
            //             },
            //             {
            //                 "name": "timeDisplay",
            //                 "align": "tl",
            //                 "x": 10,
            //                 "y": 7
            //             },
            //             {
            //                 "name": "fullScreenButton",
            //                 "align": "tr",
            //                 "x": 10,
            //                 "y": 12
            //             },
            //             {
            //                 "name": "volume",
            //                 "align": "tr",
            //                 "x": 5,
            //                 "y": 10
            //             }
            //         ]
            //     }
            // ]
        },
        function (player) {
            console.log("The player is created");
        }
    );
</script>

{include file="../apps/web/view/public/sensors.html" /}
</html>
